import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtActivityIndicator } from 'taro-ui'

import { getTransaction } from '../../api/transaction'
import { ListLoading } from '../../components/loading'

import './index.less'

class Transaction extends Taro.Component {
  config = {
    navigationBarTitleText: '交易明细'
  }

  state = {
    params: {
      pageNum: 0,
      pageSize: 0
    },
    data: [],
    isDone: false
  }

  getData = async () => {
    const res = await getTransaction(this.state.params)

    this.setState(({ data }) => ({
      data: data.concat(res.data)
    }), () => {
      // if (this.state.data.length === res.rowCount) {
        this.setState({
          isDone: true
        })
      // }
    })
  }

  componentDidMount() {
    this.getData()
  }

  onReachBottom(){
    if (this.state.isDone) return

    const { pageNum } = this.state.params

    this.setState({
      params: {
        ...this.state.params,
        pageNum: pageNum + 1
      }
    }, () => {
      this.getData()
    })
  }

  render() {
    const { data, isDone } = this.state

    return (
      <View className="page">
        { data.map((item, index) => (
          <View className="detailed" key={ index }>
            <View className="date">
              <Text>{ item.year }年{ item.month }月</Text>
              <Text>支出 { item.expenditure } 收入 { item.income }</Text>
            </View>
            <View className="list">
              { item.partnerSummaryList.map((item, index) => (
                <View className="item" key={ index }>
                  <View>
                    <Text>{ item.typeName }</Text>
                    <Text>{ item.soldAmount }</Text>
                  </View>
                  <Text>{ item.createTime }</Text>
                </View>
              )) }
            </View>
          </View>
        )) }
        <ListLoading isDone={ isDone } data={ data } />
      </View>
    )
  }
}

export default Transaction